<!-- 投标管理 -->
<template>
    <div class="supply container-content">
        <el-row>
            <el-col :span="24">
                <h3 class="panel-title">投标管理</h3>
            </el-col>
        </el-row>
        <el-divider class="divider"></el-divider>
        <el-row class="export-container">
            <el-button
                type="primary"
                size="mini"
                @click="addCustomer"
                v-hasPermi="['tender:tender:add']"
                >新增</el-button
            >
            <el-button type="primary" size="mini" @click="exporting"
                >导出</el-button
            >
        </el-row>
        <el-row class="filter-container">
            <el-col :span="24">
                <el-input
                    placeholder="查询..."
                    v-model="searchValue"
                    class="input-with-select"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        type="primary"
                    ></el-button>
                </el-input>
            </el-col>
        </el-row>

        <el-table
            ref="customerTable"
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <!-- <el-table-column prop="id" label="id"> </el-table-column> -->
            <el-table-column
                prop="customerName"
                label="投标客户名称"
            ></el-table-column>
            <el-table-column
                prop="projectOverview"
                label="招标项目概况"
            ></el-table-column>
            <el-table-column prop="projectDesc" label="项目简介">
            </el-table-column>
            <el-table-column prop="tenderTime" label="投标时间">
            </el-table-column>
            <el-table-column prop="bidOpenTime" label="开标日期">
            </el-table-column>
            <el-table-column prop="competitors" label="竞争对手">
            </el-table-column>
            <el-table-column prop="buyBidTime" label="购买标书时间">
            </el-table-column>
            <el-table-column prop="ensureMoney" label="保证金金额">
            </el-table-column>
            <el-table-column prop="capitalSource" label="招标项目资金来源">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.capitalSource === 1">自筹</el-tag>
                    <el-tag v-if="scope.row.capitalSource === 2"
                        >财政拨款</el-tag
                    >
                    <el-tag v-if="scope.row.capitalSource === 3"
                        >政府补贴</el-tag
                    >
                    <el-tag v-if="scope.row.capitalSource === 4">其他</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="tenderingType" label="招标方式">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.tenderingType === 1"
                        >公开招标</el-tag
                    >
                    <el-tag v-if="scope.row.tenderingType === 2">邀标</el-tag>
                    <el-tag v-if="scope.row.tenderingType === 3">仪标</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="isInsideResource" label="有无内部资源">
                <template slot-scope="scope">
                    <el-tag
                        type="primary"
                        v-if="scope.row.isInsideResource === 1"
                        >有</el-tag
                    >
                    <el-tag
                        type="danger"
                        v-if="scope.row.isInsideResource === 2"
                        >无</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="详情"
                        placement="bottom"
                    >
                        <el-button
                            plain
                            icon="el-icon-more"
                            size="small"
                            @click="handleDetail(scope.$index, scope.row)"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="编辑"
                        placement="bottom"
                    >
                        <el-button
                            type="primary"
                            plain
                            size="small"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="bottom"
                    >
                        <el-button
                            type="danger"
                            plain
                            size="small"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"
                        ></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="table-pagination"
            style="margin-top: 10px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <el-drawer
        title="投标管理详情"
        size="100%"
        :visible.sync="drawer"
        direction="ttb"
        :before-close="handleClose">
        <detail :rowId="rowId"/>
        </el-drawer>
    </div>
</template>
<script>
import { getList, deleteTender,getDetailTenderList } from "@/api/system/tender";
import detail from './detail'
export default {
    components:{detail},
    data() {
        return {
            tableData: [],
            searchValue: "",
            total: 0,
            selectRows: [],
            limit: 10,
            page: 1,
            drawer:false,
            rowId:''
        };
    },
    watch: {
        "$store.state.workflow.businessDrawer": {
            handler(val) {
                if (!val) {
                    this.getData();
                }
            },
        },
    },
    methods: {
        // 获取供应商列表
        getData() {
            // let type = 3;
            getList({
                page: this.page,
                limit: this.limit,
            }).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
            });
        },
        //新增客户
        addCustomer() {
            this.$store.dispatch("workflow/getModel", {
                menuId: this.$route.meta.menuId,
                type: "launch",
            });
        },
        //客户详情
        handleDetail(index, row) {
            this.drawer = true
            this.rowId = row.id
        },
        // 编辑客户
        handleEdit(index, row) {
            getDetailTenderList(row.id).then((res) => {
                if(res.code === 200){
                    this.$store.dispatch("workflow/getModel", {
                        menuId: this.$route.meta.menuId,
                        type: "edit",
                        formData:res.data
                    });
                }
            });
           
        },
        handleClose(done){
            this.$confirm('确定要离开吗？')
        .then(_ => {
          done()
        })
        .catch(_ => {});
        },

        // 删除客户
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    console.log("走进来了");
                    deleteTender(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 导出按钮
        exporting() {
            console.log("exporting");
        },
        // 表格checkcbox事件
        handleSelectionChange(rows) {
            this.selectRows = rows;
        },
        //分页器size
        handleSizeChange(val) {
            this.limit = val;
            this.getData();
        },
        //分页器page
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
    },

    created() {
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
// .visits {
//   padding: 15px;
// }
.pagination {
    margin-top: 10px;
}

.filter-container {
    margin-bottom: 15px;
}

.export-container {
    margin: 15px 0;
}

.panel-title {
    font-size: 18px;
    color: #37474f;
    font-weight: 500;
    text-shadow: rgba(0, 0, 0, 0.15) 0 0 1px;
}

.divider {
    margin: 0;
}
</style>
